<template>
  <view class="container">
    <view class="postx" :style="scrollTop>0?'background:#FFF;':''">
      <view :style="'height:'+statusBarHeight+'px'"></view>
      <view class="flexJusp" style="padding:0 20rpx;"
            :style="'height:'+navigationBarHeight+'px;line-height:'+navigationBarHeight+'px'">
        <view style="width:100rpx;" @click="back">
          <image style="width:20rpx;height:34rpx;" src="/static/image/mv_tuichu.png"></image>
        </view>
        <view style="font-size: 36rpx;font-weight: bold;text-align: center;">个人信息</view>
        <view style="width:100rpx;"></view>
      </view>
    </view>
    <view style="width: 750rpx;height: 448rpx;background: linear-gradient(180deg,#CCEAFF,#F7F6FA);">
      <view :style="'height:'+statusBarHeight+'px'"></view>
      <view :style="'height:'+navigationBarHeight+'px'"></view>
      <view style="width: 154rpx;height: 154rpx;margin:80rpx auto 76rpx;position: relative;">
        <image style="width: 154rpx;height: 154rpx;border-radius:50%;" @click="upImage"
               :src="detail.icon||this.$loadImage('logo')"></image>
        <view @click="upImage"
              style="width: 154rpx;height: 154rpx;border-radius:50%;position: absolute;top:0;left:0;background: rgba(0,0,0,0.5);">
          <image style="width:54rpx;height:54rpx;margin:50rpx;" src="/static/image/xiangji.png"></image>
        </view>
      </view>
      <view class="flexJusp"
            style="width: 590rpx;height: 40rpx;background: #FFFFFF;border-radius: 52rpx;padding:28rpx 36rpx;line-height:40rpx;margin: auto;">
        <view>姓名</view>
        <input v-model="detail.nickname" style="text-align: right;font-size:28rpx;" placeholder="请输入姓名"/>
      </view>
      <view class="flexJusp"
            style="width: 590rpx;height: 40rpx;background: #FFFFFF;border-radius: 52rpx;padding:28rpx 36rpx;line-height:40rpx;margin:28rpx auto;">
        <view>电话</view>
        <input v-model="detail.phone" type="number" maxlength="11" style="text-align: right;font-size:28rpx;"
               placeholder="请输入电话"/>
      </view>
      <view class="flexJusp"
            style="width: 590rpx;height: 40rpx;background: #FFFFFF;border-radius: 52rpx;padding:28rpx 36rpx;line-height:40rpx;margin:auto;">
        <view>性别</view>

        <uni-data-select
            v-model="detail.sex"
            :localdata="sex"
            :value="text"
            :clear="false"
        />

      </view>
      <view class="flexJusp"
            style="width: 590rpx;height: 40rpx;background: #FFFFFF;border-radius: 52rpx;padding:28rpx 36rpx;line-height:40rpx;margin:28rpx auto;">
        <view>年龄</view>
        <input v-model="detail.age" type="number" style="text-align: right;font-size:28rpx;" placeholder="请输入年龄"/>
      </view>
      <view class="flexJusp"
            style="width: 590rpx;height: 40rpx;background: #FFFFFF;border-radius: 52rpx;padding:28rpx 36rpx;line-height:40rpx;margin:0 auto 260rpx;">
        <view>区域</view>
        <input v-model="detail.area" style="text-align: right;font-size:28rpx;" placeholder="请输入区域"/>
        <!-- 	<view @click="xuanze"  v-model="detail.area">
            {{areaName||'请选择省市区'}}
          </view> -->
      </view>
      <view class="buttons" @click="updateuserinfo">保存</view>
    </view>
  </view>
</template>

<script>
import {systemInfo} from '@/https/mixin.js'

export default {
  mixins: [systemInfo],
  data() {
    return {
      scrollTop: 0,
      images: '',
      areaName: '',
      detail: {},
      value: 0,
      sex: [
        {value: 0, text: "男"},
        {value: 1, text: "女"}
      ],
    }
  },
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.index = e.detail.value
  },
  onLoad() {
    this.getSystemInfo()
    this.loads()
  },
  onPageScroll(event) {
    const scrollTop = event.scrollTop // 获取当前页面滚动高度
    this.scrollTop = event.scrollTop
  },
  methods: {
    updateuserinfo() {
      this.$httpapi('updateuserinfo', 'POST', {
        icon: this.detail.icon,
        nickname: this.detail.nickname,
        sex: this.detail.sex,
        age: this.detail.age,
        area: this.detail.area,
        phone: this.detail.phone
      }).then(res => {
		  console.log(res)
        uni.showToast({
          title: res.msg,
          duration: 1500,
          icon: 'none'
        });
        if (res.code == 200) {
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      })
    },

    loads() {
      this.$httpapi('selectuserinfo', 'POST', {}).then(res => {
        this.detail = res.data
        this.detail.sex = parseInt(this.detail.sex)
      })
    },
    back() {
      uni.navigateBack()
    },
    upImage() {
      var that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
        success: function (res) {
          that.$upShop('upload', res.tempFilePaths[0]).then(rex => {
            let arr = JSON.parse(rex.data)
            console.log(arr, '-----------')
            that.detail.icon = arr.fileName
          }).catch((e) => {
          });
        }
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #F7F6FA;
}

.container {
  padding-bottom: 150rpx;

  .postx {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999;
  }

  .buttons {
    margin: auto;
    text-align: center;
    width: 562rpx;
    height: 88rpx;
    background: linear-gradient(180deg, #2089FF 0%, #11ACEF 100%);
    border-radius: 44rpx;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 88rpx;
  }

  .uni-select {
    border: 0;
  }

  .uni-stat__select {
    height: 40rpx;
    text-align: center;
  }

  .uni-select__input-box {
    width: 120rpx;
  }

  .uniui-bottom:before {
    content: "";
  }

  .uniui-top::before {
    content: "";
  }

  .uni-popper__arrow::after {
    content: none;
  }

  .uni-popper__arrow {
    margin: 0;
    border: 0;
  }

}
</style>
